/**
 * 自愿报告
 */
 <template>
  <vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="keyword">
							<template #label><vp-label zh="关键字" en="Keyword"/></template>
							<el-input v-model="searchForm.keyword" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bmidList">
							<template #label><vp-label zh="部门" en="Deparment"/></template>
							<DepartmentMultSelectTree  :treeDefaultChecked="searchForm.treeDefaultChecked"
									:selectedText="searchForm.departmentDesc" @treeSelected="handleDepartmentSelected"
									class="w100"></DepartmentMultSelectTree>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bgrq">
							<template #label><vp-label zh="报告日期" en="Report Date"/></template>
							<el-date-picker
								v-model="searchForm.bgrq"
								type="daterange"
								start-placeholder="开始日期/Start Date"
								end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD"
								unlink-panels
								range-separator="-"
								class="w100"
							>
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="ztList">
							<template #label><vp-label zh="状态" en="Status"/></template>
							<VpStatusMultSelect v-model="searchForm.ztList" />
						</el-form-item>
					</vp-search-col>
					<vp-search-col v-if="jb == 10">
						<el-form-item prop="nmbsList">
							<template #label><vp-label zh="是否匿名" en="Is Anonymous" /></template>
							<el-select v-model="searchForm.nmbsList"  multiple collapse-tags   placeholder="请选择">
								<el-option label="是 YES" :key="1" :value="1"></el-option>
								<el-option label="否 NO" :key="0" :value="0"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-if="type != 'list'" v-auths="['qualitySafetyDeptVoluntary.edit', 'qualitySafetyOrgVoluntary.edit']" @click="handleAdd"/>
			<vp-btn-export v-if="type === 'list'" @click="handleExport"/>
		</template>
		<template #table>
			<vp-vxe-table 
				:id="`${props.jb === 10 ? 'qualitySafetyDeptVoluntaryTable' : 'qualitySafetyOrgVoluntaryTable'}`"
				ref="tableRef" 
				:data="tableData" 
				@sort-change="handleSortChange"
				row-key="id"
				v-loading="loading"
			>	
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column sortable field="bh" title="报告编号 Report No." show-overflow min-width="120">
					<template #header><vp-label zh="报告编号" en="Report No."/></template>
				</vxe-column>
				<vxe-column sortable field="bgrq" title="报告日期 Report Date" show-overflow min-width="120">
					<template #header><vp-label zh="报告日期" en="Report Date"/></template>
				</vxe-column>
				<vxe-column sortable field="bgr" title="报告人 Reporter" show-overflow min-width="110">
					<template #header><vp-label zh="报告人" en="Reporter"/></template>
					<template #default="scope">
						<div v-if="scope.row.nmbs == 1">
							<span>{{ '*********' }}</span>
							<AnonymousContentViewer 
								v-if="auths(['voluntaryList.showanonymous', 'reportList.showanonymous'])"
								:username="scope.row.bgr" 
								:departmentName="scope.row.bgbm" 
							/>
						</div>
						<div v-else>{{ scope.row.bgr }}</div>
					</template>
				</vxe-column>
				<vxe-column sortable field="bgbm" title="部门 Department" show-overflow min-width="120">
					<template #header><vp-label zh="部门" en="Department"/></template>
					<template #default="scope">
						{{ scope.row.nmbs == 1 ? '*********' : scope.row.bgbm }}
					</template>
				</vxe-column>
				<vxe-column sortable field="bgnr" title="报告内容 Content" show-overflow min-width="220">
					<template #header><vp-label zh="报告内容" en="Content"/></template>
				</vxe-column>
				<vxe-column field="cljg" title="处理结果 Handling Result" show-overflow min-width="120">
					<template #header><vp-label zh="处理结果" en="Handling Result"/></template>
					<template #default="scope">
						<span>{{ scope.row.cnbs === 1 ? '采纳：' : scope.row.cnbs === 0 ? '不采纳：' : '' }}</span>
						<span v-if="scope.row.cnbs == 1" v-html="markTextColor(searchForm.keyword, scope.row.cljg || scope.row.cnsm)"/>
						<span v-if="scope.row.cnbs == 0" v-html="markTextColor(searchForm.keyword, scope.row.cnsm)"/>
					</template>
				</vxe-column>
				<vxe-column sortable field="jlje" title="奖励金额 Reward Amount" show-overflow min-width="145" v-if="jb == 20 || (lx == 20 && jb == 10)">
					<template #header><vp-label zh="奖励金额" en="Reward Amount"/></template>
					<template #default="scope">
						{{ scope.row.jlje || scope.row.jlje == 0 ? scope.row.jlje + '元 CNY' : ''}}
					</template>
				</vxe-column>
				<vxe-column sortable field="zt" title="状态 Status" show-overflow min-width="110">
					<template #header><vp-label zh="状态" en="Status"/></template>
					<template #default="scope">
						{{ getStatusDesc(scope.row.zt) }}
					</template>
				</vxe-column>
				<vxe-column field="operation" title="操作 Operations" fixed="right" :min-width="type == 'list' ? 300 : 160">
					<template #header><vp-label-operations/></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit v-if="scope.row.zt == 10" text v-auths="['qualitySafetyDeptVoluntary.edit', 'qualitySafetyOrgVoluntary.edit']" @click="handleEdit(scope.row)"/>
							<vp-btn-del v-if="scope.row.zt == 10" text v-auths="['qualitySafetyDeptVoluntary.edit', 'qualitySafetyOrgVoluntary.edit']" @click="handleDelete(scope.row)"/>
							<vp-btn type="primary" v-if="scope.row.zt == 89 && type == 'list' && !(lx == 10 && jb == 10)" text v-auths="['qualitySafetyVoluntaryList.edit']" @click="handleReward(scope.row)">
								<vp-label zh="维护奖励情况" en="Edit Reward"/>
							</vp-btn>
							<vp-btn type="primary" v-if="scope.row.zt == 89 && type == 'list' && (lx == 10 && jb == 10) && scope.row.nrbs != 1" text v-auths="['qualitySafetyVoluntaryList.edit']" @click="handleBringInto(scope.row)">
								<vp-label zh="纳入公司级清单" en="Included in Comp."/>
							</vp-btn>
							<vp-btn-discard v-if="scope.row.zt === 88 || scope.row.zt === 89" text v-auths="['qualitySafetyDeptVoluntary.discard', 'qualitySafetyOrgVoluntary.discard']" @click="handleCancle(scope.row)"/>
							<vp-btn type="primary" v-if="scope.row.zt == 89 && lx == 10 && type == 'list'" text v-auths="['qualitySafetyVoluntaryList.edit']" @click="handleEditBh(scope.row)">
								<vp-label zh="修改编号" en="Edit No."/>
							</vp-btn>
							<vp-btn-print text @click="handlePrint(scope.row)"/>
							<vp-btn-view text @click="handleView(scope.row)"/>
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
		<EditVoluntaryDept ref="editDialogRef" @formSubmited="handleFormSubmited"></EditVoluntaryDept>
		<EditReward ref="editRewardDialogRef" @formSubmited="handleFormSubmited"></EditReward>
		<EditBh ref="editBhDialogRef" @formSubmited="handleFormSubmited"></EditBh>
	</vp-main-page>
</template>

<script setup lang="ts" name="voluntaryDeptIndex">
import { ref, reactive, onMounted } from 'vue';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';
import EditVoluntaryDept from "./component/EditVoluntaryDept.vue";
import EditReward from "./component/EditReward.vue";
import EditBh from "./component/EditBh.vue";
import DepartmentMultSelectTree from '/@/components/vp/department/VpDepartmentMultSelectTree.vue';
import router from '/@/router';
import AnonymousContentViewer from "./component/AnonymousContentViewer.vue";
import {auths} from '/@/utils/authFunction';
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import commonFunction from '/@/utils/commonFunction';
import VpStatusMultSelect from "/@/components/vp/status/VpStatusMultSelect.vue";

const searchForm = reactive({
	keyword: "",
	ztList: [10,88,89],
	bgrq:[],
	nmbsList: [],
	bmidList: [] as string[],
	departmentDesc: '',
	treeDefaultChecked: [],
	lx: 10, // 类型 10自愿报告 20举报信息
	jb: 10, // 级别 10部门 20公司
	sygn:11, //11部门自愿报告 21部门举报信息 12公司自愿报告 22公司举报信息 
});

const props = defineProps({
	lx: {
		type: Number,
	},
	jb: {
		type: Number,
	},
	sygn: {
		type: String,
	},
	type: {
		type: String,
	},
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/voluntary/dept/list', {
		params: {
			...searchForm,
			...page,
			cnbs: props.type === 'list' ? 1 : null,
		}
	}).then(res => {
		tableData.value = res?.data?.list || [];
		page.total = res?.data?.total || 0;
		page.pageNum = res?.data?.pageNum || 1;
	}).finally(()=>{
		loading.value = false;
	})
}

const searchFormRef = ref();
const tableRef = ref();

// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
	searchForm.bmidList = [];
	searchForm.departmentDesc = '';
	searchForm.treeDefaultChecked = [];
}

// 列表字段排序
const handleSortChange = (column: any)=>{
	page.sortColumn = column.field;
	page.sortOrder = column.order;
	loadDataList()
}

onMounted(() => {
	if(props.jb){
		searchForm.jb = props.jb;
	}
	if(props.lx){
		searchForm.lx = props.lx;
	}
	if(props.sygn){
		searchForm.sygn = props.sygn;
	}
	loadDataList();
});

const editDialogRef = ref();

const handleAdd = ()=>{
	editDialogRef.value.handleOpen('add','', props.lx || 10, props.jb || 10);
};
const handleView = (row:any)=>{
	let name = row.lx == 10 && row.jb == 10 ?  "viewVoluntaryDept" : row.lx == 20 && row.jb == 10 ? "viewReportDept" : 
		row.lx == 10 && row.jb == 20? "viewVoluntaryOrg" : row.lx == 20 && row.jb == 20? "viewReportOrg" : "";
	router.push({
		name: name,
		params: {
		id: row.id,
	},
});
}
const handleEdit = (row: any)=>{
	editDialogRef.value.handleOpen('edit', row.id, row.lx, row.jb);
}

// 删除
const handleDelete = (row: any)=>{
	VpMessageBox.confirmDelete().then(()=>{
		loading.value = true;
		request.delete(`/voluntary/dept/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}

// 终止
const handleCancle = (row: any)=>{
	VpMessageBox.confirmOperation().then(()=>{
		loading.value = true;
		request.post(`/voluntary/dept/cancle/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}


// 表单完成后回调事件
const handleFormSubmited = () => {
	loadDataList();
}

const handleDepartmentSelected = (list: any) => {
	let bmidList = [] as string[];
	list.forEach((obj: any) => {
		bmidList.push(obj.id);
	});
	searchForm.bmidList = bmidList;
	searchForm.departmentDesc = list.map((obj: any) => {
		return obj.label;
	}).join(", ");
}

const {exportFile, printFile, getStatusDesc} = commonFunction();

const handleExport = () =>{
	if(!props.jb || !props.lx){
		return;
	}
	exportFile({
		url: `/voluntary/dept/export`,
		params: {
			...searchForm,
			cnbs : 1,
		},
		fileName: props.lx == 10 && props.jb == 10 ? '员工—部门自愿报告统计.xlsx' : props.lx == 10 && props.jb == 20 ? '员工—公司自愿报告统计.xlsx' :
				props.lx == 20 && props.jb == 10 ? '员工—部门举报信息统计.xlsx' : props.lx == 20 && props.jb == 20 ? '员工—公司举报信息统计.xlsx'  : "",
	});
}

const handlePrint = (row: any) =>{
	printFile({
		url: `/voluntary/dept/print/${row.id}`
	});
}

const editRewardDialogRef = ref();

const handleReward = (row: any) => {
	editRewardDialogRef.value.handleOpen(row.id);
}

const handleBringInto = (row: any) => {
	VpMessageBox.confirmOperation().then(()=>{
		loading.value = true;
		request.post(`/voluntary/dept/bringInto/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}

const editBhDialogRef = ref();
const handleEditBh = (row: any) => {
	editBhDialogRef.value.handleOpen(row.id);
}
</script>
<style lang="scss" scoped>
</style>
